<template>
  <b-col>
    <b-row class="pt-3 pl-3">
      <b-col class="pl-0 col-auto">
        <h4 style="font-family:HYZhengYuan-85S">
          我的消息
        </h4>
      </b-col>
      <b-col v-if="loading" class="col-auto">
        <b-spinner variant="primary" type="grow" small />
      </b-col>
    </b-row>
    <b-row class="pl-2">
      <!-- 未读-->
      <b-col class="col-auto ml-1 mr-5" :class="{isClick:this.display == 1}">
        <b-link @click="updatePage(1,id,0)" style="font-size:18px" class="text-decoration-none text-dark">未 读</b-link>
      </b-col>
      <!--全部 -->
      <b-col class="col-auto ml-1 mr-5" :class="{isClick:this.display == 2}">
        <b-link @click="updatePage(1,id,-1)" style="font-size:18px" class="text-decoration-none text-dark">全 部</b-link>
      </b-col>
      <b-col v-show="display == 1" class="text-right">
        <b-link @click="hasRead" style="font-size:18px">全部已读</b-link>
      </b-col>
    </b-row>
    <!-- 循环体 -->
    <b-row v-for="issue in taIssue.data" :key="issue.id+createId()" class="mt-2 border-bottom">
      <b-col>
        <b-row class="py-2">
          <b-col class="pr-2 col-auto">
            <b-link class="text-nowarp text-decoration-none">{{issue.sender.name}}</b-link>
            <span v-if="issue.source[0] == 'd' || issue.source[0] == 'a'" class="ml-3 text-muted">评论了我</span>
            <span v-else-if="issue.source[0] == 'c'" class="ml-3 text-muted">回复了我</span>
            <span v-else class="ml-3 text-muted">关注了我</span>
          </b-col>
          <div class="w-100" />
          <b-col class="pr-4">
            <!-- 名称和内容 -->
            <b-row>
              <b-col class="mt-2">
                <span>{{issue.content}}</span>
              </b-col>
              <div class="w-100" />
              <InfoView class="pl-3" :info="issue" />
            </b-row>
          </b-col>
          <div class="w-100" />
          <!-- 时间 和详情-->
          <b-col class="col-auto mt-1">
            <span class="text-muted">{{issue.time.year}}年{{issue.time.monthValue}}月{{issue.time.dayOfMonth}}日
              {{issue.time.hour}}:{{issue.time.minute>9?issue.time.minute:'0'+issue.time.minute}}</span>
            <b-link v-if="issue.source!='null'&&issue.source[0]!='c'" @click="toDetail(issue.source,issue.source[0]=='a'?'article':'dynamic')"
              class="iconfont icon-arrow-double-right text-decoration-none ml-3">查看详情</b-link>
          </b-col>
        </b-row>
      </b-col>
    </b-row>
    <!-- 翻页 -->
    <b-row v-if="taIssue.total != 0">
      <b-col>
        <b-pagination-nav prev-text="上一页" next-text="下一页" use-router :base-url="pagination.baseURL" :value="this.taIssue.page" align="center" size="md"
          :number-of-pages="pagination.total" />
      </b-col>
    </b-row>
    <b-row v-else>
      <b-col class="text-center mt-5 mb-3">
        暂无未读消息
      </b-col>
    </b-row>
  </b-col>
</template>
<script>
import { nanoid } from 'nanoid';
import InfoView from './InfoView';
export default {
  components: {
    InfoView,
  },
  props: {
    id: String,
  },
  data() {
    return {
      //页面内容
      taIssue: {
        data: null,
      },
      //加载圈
      loading: true,
      //分页组件
      pagination: {
        page: null,
        total: null,
        baseURL: "/PersonPage/MessageCard?id=" + this.id + "&page=",
      },
      //控制已读未读
      display: 1,
    }
  },
  mounted() {
    this.updatePage(1, this.id, 0);
    this.$parent.messageNum = this.unreadNum;
  },
  beforeRouteUpdate(to) {
    this.loading = true;
    if (this.display == 1) {
      this.updatePage(to.query.page, to.query.id, 0);
    } else if (this.display == 2) {
      this.updatePage(to.query.page, to.query.id, -1);
    }
  },
  methods: {
    //页面更新
    updatePage(page, id, type) {
      if (type == 0) this.display = 1;
      else this.display = 2;
      this.$httpIssue.getUserMessage(page, id, type).then((res) => {
        this.taIssue = res;
        this.pagination.page = res.page;
        this.pagination.total = Math.ceil(res.total / 5);
        // console.log(res);
        if (type == 0) this.$parent.messageNum = res.total;
        this.loading = false;
      });
    },
    //全部已读
    hasRead() {
      this.$httpIssue.readAll(this.id).then(() => {
        this.updatePage(1, this.id, 0);
      });
      this.$parent.messageNum = this.unreadNum;
    },
    //生成一个唯一id
    createId() {
      return nanoid(4);
    },
    //跳转到详情
    toDetail(id, type) {
      this.$pageRedirect.toADDetails(id, type);
    },
  }
}
</script>
<style scoped>
.commentSelf {
  border-left: 4px solid rgb(134, 134, 134);
}
.isClick {
  border-bottom: solid 3px #0c91de;
}
</style>
